<template>
  <!-- 公司介绍 -->
  <div class="introduce">
    <div class="product">
      <h1>书归，书途同归——大学生综合服务型平台</h1>
      <p>Return to Books, Return to Books</p>
    </div>
    <div class="msg">
      <p>
        书归简介：贵州书归信息服务有限公司成立于2021年10月，由从事互联网科技行业10年以上资深人士联合风险投资共同成立，并于2021年8月获得天使投资300万元。
      </p>
    </div>
  </div>

  <!-- 核心产品 -->
  <div class="kernel">
    <div class="product">
      <h1>核心产品</h1>
      <p>core product</p>
    </div>
    <div class="collaborate">
      <div class="message" v-for="(item, index) in list" :key="index">
        <img class="cs" :src="item.ico" alt="" />
        <h2>{{ item.title }}</h2>
        <p>
          {{ item.introduce }}
        </p>
      </div>
    </div>
  </div>

  <!-- 设计资讯 -->
  <div class="design">
    <div class="product">
      <h1>设计资讯</h1>
      <p>Design information</p>
    </div>
    <div class="msg">
      <p>
        贵州书归信息有限公司是一家深耕于大数据+交通行业融合领域多年的高新技术企业，专注于大数据应用研发、产品开发及公安、交通等行业设计咨询服务，我们的使命是“万物汇智，诚就未来”。
      </p>
    </div>
  </div>

  <!-- 解决方案 -->
  <div class="solution">
    <div class="product">
      <h1>解决方案</h1>
      <p>solution</p>
    </div>
    <div class="solutions">
      <div v-for="(item, index) in solution" :key="index" class="solutionsImg">
        <img :src="item.imgurl" alt="" />
        <h2 class="solutions_title">
          {{ item.title }}
        </h2>
        <img class="solutions_ico" :src="item.ico" alt="" />
        <div class="bgsolutions" :style="bgsolutions"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: "",
      bgsolutions: "",
      //   核心产品数据 introduce产品介绍 ico标题上方图片
      list: [
        {
          title: "书归科技",
          introduce:
            "AI智能诊断，完备算法仓库，模型深度学习，灵活任务分配，精细绩效管理。",
          ico: "https://img0.baidu.com/it/u=1210175255,850982052&fm=26&fmt=auto",
        },
        {
          title: "书归科技",
          introduce:
            "AI智能诊断，完备算法仓库，模型深度学习，灵活任务分配，精细绩效管理。",
          ico: "https://img0.baidu.com/it/u=1210175255,850982052&fm=26&fmt=auto",
        },
        {
          title: "书归科技",
          introduce:
            "AI智能诊断，完备算法仓库，模型深度学习，灵活任务分配，精细绩效管理。",
          ico: "https://img0.baidu.com/it/u=1210175255,850982052&fm=26&fmt=auto",
        },
      ],
      //   解决方案数据 imgurl是背景  ico是小标题图片
      solution: [
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fq_70%2Fimages03%2F20210909%2Fd6acb304d97e472cab3e0edcf81ea2b5.jpeg&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643442283&t=e76b02ec0c357c3070ad48a63d81cfa5",
          title: "公安数据应用",
          ico: "https://img0.baidu.com/it/u=1210175255,850982052&fm=26&fmt=auto",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fq_70%2Fimages03%2F20210909%2Fd6acb304d97e472cab3e0edcf81ea2b5.jpeg&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643442283&t=e76b02ec0c357c3070ad48a63d81cfa5",
          title: "公安数据应用",
          ico: "https://img0.baidu.com/it/u=1210175255,850982052&fm=26&fmt=auto",
        },
        {
          imgurl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.itc.cn%2Fq_70%2Fimages03%2F20210909%2Fd6acb304d97e472cab3e0edcf81ea2b5.jpeg&refer=http%3A%2F%2Fp0.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643442283&t=e76b02ec0c357c3070ad48a63d81cfa5",
          title: "公安数据应用",
          ico: "https://img0.baidu.com/it/u=1210175255,850982052&fm=26&fmt=auto",
        },
      ],
    };
  },
  methods: {
    // mousebgsolutions() {
    //   this.bgsolutions = {
    //     height: "384px",
    //   };
    // },
    // mouseleavebgsolutions() {
    //   this.bgsolutions.style = {
    //     height: "0",
    //   };
    // },
    mousehouver() {
      console.log("123132132");
      this.active =
        "background-color: rgb(160, 202, 255);color:#fff;transition: all 0.5s;";
    },
    mouseleave() {
      this.active = "";
    },
  },
};
</script>
<style scoped>
.message:hover img {
  box-shadow: 0px 4px 16px #000;
}
.message:hover {
  transition: all 0.5s;
  background-color: rgb(160, 202, 255);
  color: white;
}
.solutionsImg {
  transition: all 1s;
}
.solutionsImg:hover {
  transform: scale(1.1);
}
.bgsolutions {
  width: 348px;
  height: 0;
  background-color: #000;
  position: absolute;
  top: 0;
  z-index: 3;
  transition: all 0.5;
}

.solution {
  margin-top: 100px;
  margin-bottom: 80px;
}
.solutions .solutions_ico {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 30%;
  margin-left: 140px;
}
.solutions_title {
  position: absolute;
  top: 50%;
  margin-left: 100px;
  font-size: 25px;
  color: #fff;
  z-index: 2;
}
.solutions {
  display: flex;
  width: 1200px;
  margin: auto;
  justify-content: space-between;
  margin-top: 50px;
  position: relative;
}
.solutions img {
  width: 348px;
  height: 384px;
}
.msg {
  width: 100%;
  max-width: 1200px;
  padding: 40px;
  font-size: 18px;
  color: #fff;
  margin: auto;
  background-color: #758fb5;
}
.design .product {
  margin-bottom: 60px;
}
.design {
  width: 1200px;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 80px;
}

.collaborate {
  width: 1200px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.message h2 {
  font-size: 22px;
}
.message p {
  padding: 30px;
  line-height: 40px;
  font-size: 18px;
}
.message {
  height: 352px;
  width: 352px;
  background-color: #f99;
  margin: 20px 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.cs {
  height: 80px;
  width: 80px;
}
.product {
  margin-bottom: 80px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.product h1 {
  font-size: 26px;
}
.product p {
  color: rgb(160, 202, 255);
}
.introduce {
  margin: 100px auto;
}
.introduce h1 {
  text-align: center;
  font-size: 32px;
  font-weight: 500;
}
.introduce div {
  margin: auto;
}
.el-tabs__nav {
  width: 100%;
}
</style>
